import { Tabs } from 'nextra/components'
import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'
import BusinessPlanNotice from '@/components/BusinessPlanNotice'
import ServerNotice from '@/components/ServerNotice'

# Import & Export

<BadgeGroup values={[UniverTypes.SHEET]} value={UniverTypes.SHEET} />

<BusinessPlanNotice />

<ServerNotice />

We provide the ability to import and export Excel files through the server interface. Install this plugin to quickly access the import and export capabilities in Univer.

Currently only `.xlsx` format is supported.

## Installation

<Tabs items={['pnpm', 'npm']}>
  <Tabs.Tab label="pnpm">
    ```shell
    pnpm add @univerjs-pro/sheets-exchange-client
    ```
  </Tabs.Tab>
  <Tabs.Tab label="npm">
    ```shell
    npm install @univerjs-pro/sheets-exchange-client
    ```
  </Tabs.Tab>
</Tabs>

## Import

```typescript
import '@univerjs-pro/sheets-exchange-client/lib/index.css';

import { UniverSheetsExchangeClientPlugin } from '@univerjs-pro/sheets-exchange-client';
```

## Internationalization

```typescript
import { LocaleType, Tools } from '@univerjs/core';
import SheetsExchangeClientEnUS from '@univerjs-pro/sheets-exchange-client/locale/en-US';

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      SheetsExchangeClientEnUS
    ),
  },
});
```

## Register

```typescript
univer.registerPlugin(UniverSheetsExchangeClientPlugin);
```

## Configuration

If the import/export interface has not changed, you do not need to configure it. If there are changes, you can configure the interface address as follows:

```typescript
import { IConfigService } from '@univerjs/core'
import { EXCHANGE_UPLOAD_FILE_SERVER_URL_KEY, EXCHANGE_IMPORT_SERVER_URL_KEY, EXCHANGE_EXPORT_SERVER_URL_KEY, EXCHANGE_GET_TASK_SERVER_URL_KEY, EXCHANGE_SIGN_URL_SERVER_URL_KEY } from '@univerjs-pro/sheets-exchange-client';

const injector = univer.__getInjector();
const configService = injector.get(IConfigService);
configService.setConfig(EXCHANGE_UPLOAD_FILE_SERVER_URL_KEY, `http://localhost:3010/universer-api/stream/file/upload`);
configService.setConfig(EXCHANGE_IMPORT_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/{type}/import`);
configService.setConfig(EXCHANGE_EXPORT_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/{type}/export`);
configService.setConfig(EXCHANGE_GET_TASK_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/task/{taskID}`);
configService.setConfig(EXCHANGE_SIGN_URL_SERVER_URL_KEY, `http://localhost:3010/universer-api/file/{fileID}/sign-url`);
```

## Custom Usage

If you are not satisfied with the features provided by the plugin, you can also use the [Facade API](/guides/sheet/facade/facade#use-with-the-univer-server) to implement custom import and export processes. Please refer to [Server-Related Features](/guides/sheet/facade/sheet-api#server-related-features) for more details.

## FAQ

### How to Open or Edit an Excel File from a URL

Here is an implementation idea for your reference. First, use the browser's fetch API to download the file from the URL and convert it into a File object. Then, call the `importXLSXToUnitId` or `importXLSXToSnapshot` methods from the [Facade API](/guides/sheet/facade/facade#use-with-the-univer-server) to import it. The sample code is as follows:

```typescript
const url = 'https://example.com/filename.xlsx'; // Your Excel file URL

// Function to fetch and convert the URL to a File object
async function fetchExcelFile(url) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    return new File([blob], 'filename.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  } catch (error) {
    console.error('Failed to fetch the file:', error);
  }
}

// Fetch the file and import it as a snapshot
fetchExcelFile(url).then(file => {
  if (file) {
    const snapshot = univerAPI.importXLSXToSnapshot(file);
    console.log('Snapshot created:', snapshot);
  }
});
```
